@import "mixins/mixins";
@import "common/var";
@import "input";

@include b(input-number) {
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: #{$--input-height - 2};

    .el-input {
        display: block;

        &__inner {
            -webkit-appearance: none;
            padding-left: #{$--input-height + 10};
            padding-right: #{$--input-height + 10};
            text-align: center;
        }
    }

    @include e((increase, decrease)) {
        position: absolute;
        z-index: 1;
        top: 1px;
        width: $--input-height;
        height: auto;
        text-align: center;
        background: $--background-color-base;
        color: $--color-text-regular;
        cursor: pointer;
        font-size: 13px;

        &:hover {
            color: $--color-primary;

            &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                border-color: $--input-focus-border;
            }
        }

        &.is-disabled {
            color: $--disabled-color-base;
            cursor: not-allowed;
        }
    }

    @include e(increase) {
        right: 1px;
        border-radius: 0 $--border-radius-base $--border-radius-base 0;
        border-left: $--border-base;
    }

    @include e(decrease) {
        left: 1px;
        border-radius: $--border-radius-base 0 0 $--border-radius-base;
        border-right: $--border-base;
    }

    @include when(disabled) {
        @include e((increase, decrease)) {
            border-color: $--disabled-border-base;
            color: $--disabled-border-base;

            &:hover {
                color: $--disabled-border-base;
                cursor: not-allowed;
            }
        }
    }

    @include m(lg) {
        width: 200px;
        line-height: #{$--input-lg-height - 2};

        @include e((increase, decrease)) {
            width: $--input-lg-height;
            font-size: $--input-lg-font-size;
        }

        .el-input__inner {
            padding-left: #{$--input-lg-height + 7};
            padding-right: #{$--input-lg-height + 7};
        }
    }

    @include m(sm) {
        width: 130px;
        line-height: #{$--input-sm-height - 2};

        @include e((increase, decrease)) {
            width: $--input-sm-height;
            font-size: $--input-sm-font-size;

            [class*=el-icon] {
                transform: scale(.9);
            }
        }

        .el-input__inner {
            padding-left: #{$--input-sm-height + 7};
            padding-right: #{$--input-sm-height + 7};
        }
    }

    //@include m(mini) {
    //    width: 130px;
    //    line-height: #{$--input-mini-height - 2};
    //
    //    @include e((increase, decrease)) {
    //        width: $--input-mini-height;
    //        font-size: $--input-mini-font-size;
    //
    //        [class*=el-icon] {
    //            transform: scale(.8);
    //        }
    //    }
    //
    //    .el-input__inner {
    //        padding-left: #{$--input-mini-height + 7};
    //        padding-right: #{$--input-mini-height + 7};
    //    }
    //}

    @include when(without-controls) {
        .el-input__inner {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    @include when(controls-right) {
        .el-input__inner {
            padding-left: 5px;
            padding-right: 37px;
        }

        @include e((increase, decrease)) {
            height: auto;
            line-height: #{($--input-height - 2) / 2};

            [class*=el-icon] {
                transform: scale(.8);
            }
        }

        @include e(increase) {
            border-radius: 0 $--border-radius-base 0 0;
            border-bottom: $--border-base;
        }

        @include e(decrease) {
            right: 1px;
            bottom: 1px;
            top: auto;
            left: auto;
            border-right: none;
            border-left: $--border-base;
            border-radius: 0 0 $--border-radius-base 0;
        }

        &[class*=lg] {
            [class*=increase], [class*=decrease] {
                height: #{($--input-lg-height - 2) / 2};
                line-height: #{($--input-lg-height - 2) / 2};
            }
        }

        &[class*=sm] {
            [class*=increase], [class*=decrease] {
                height: #{($--input-sm-height) / 2};
                line-height: #{($--input-sm-height) / 2};
            }
        }

        //&[class*=mini] {
        //    [class*=increase], [class*=decrease] {
        //        line-height: #{($--input-mini-height - 2) / 2};
        //    }
        //}
    }
}
